<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>IISP Demo</title>
<base href=".">
<link id="theme" rel='stylesheet' href='./assets/static/layout/css/layout.css'>
<link id="theme" rel='stylesheet' href='./assets/static/font-awesome/css/font-awesome.min.css'>
<script type="text/javascript" src="./assets/commonjs.htm"></script>
<script type="text/javascript" src="./assets/static/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./assets/static/iisp/js/iisp.js"></script>
<style type="text/css">
.fa-connectdevelop:before {
    content: "\F20E";
}
.wrapper .sidebar ul li > a span {
  margin-left: 1em;
}
.txt_relation {
	white-space: nowrap;
  display: none;
}
#menu_list>.tns-list{
	padding:15px 0 0px 12px;
	font-size:18px;
}
#menu_list>.tns-list>.txt_relation{
	cursor:pointer;
}
#menu_list>.tns-list>ul>.tns-list>.txt_relation{
	cursor:pointer;
}
#menu_list>.tns-list>ul{
	padding:10px 0 0 29px;
	
}
#menu_list>.tns-list>ul>li{
	padding-bottom:4px;
	
}
.tns-list {
	white-space: nowrap;
}
.tns-list>ul{
	display:none;
}
.first-level-icon{
 	display: inline-block;
    width: 25px;
    height: 25px;
    margin-right:8px;
    vertical-align:middle;
}
#menu_list>.tns-list:nth-child(1) .first-level-icon{
 	background:url("assets/static/layout/images/gxtc.svg") no-repeat;
 	background-size:24px;
}
#menu_list>.tns-list:nth-child(3) .first-level-icon{
 	background:url("assets/static/layout/images/gxwj.svg") no-repeat;
 	background-size:24px;
}
#menu_list>.tns-list:nth-child(5) .first-level-icon{
 	background:url("assets/static/layout/images/jgcxxz.svg") no-repeat;
 	background-size:24px;
}
#menu_list>.tns-list:nth-child(7) .first-level-icon{
 	background:url("assets/static/layout/images/yycs.svg") no-repeat;
 	background-size:24px;
}
#menu_list>.tns-list:nth-child(9) .first-level-icon{
 	background:url("assets/static/layout/images/download.svg") no-repeat;
 	background-size:24px;
}
.wrapper .sidebar ul#menu_list li > ul{
	padding-top:8px;
}
.wrapper .sidebar ul#menu_list li > ul {
	padding-top:8px;
}
.wrapper .sidebar ul#menu_list>li > ul>li>ul {
	padding-left:22px;
}
.wrapper .sidebar ul#menu_list>li > ul>li>ul>li {
	padding-bottom:3px;
}
.wrapper .sidebar ul#menu_list>li > ul>li>ul>li span{
	font-size:16px;
}
.wrapper .sidebar ul#menu_list li > a{
	display: inline-block;
    padding: 0;
}
.wrapper .sidebar ul#menu_list li > a span{
	margin-left:0;
	font-size:18px;
}
.wrapper .sidebar ul#menu_list li > a span{
	margin-left:0;
	font-size:18px;
}
.wrapper .sidebar .sidebar-scroll-content {
	overflow: hidden;
}
.wrapper .sidebar {
	box-shadow: 5px 0px 5px -5px rgba(0,0,0,.5);
}
.toggleicon{
	display:none;
}
.seeing-img{
	display:inline-block;
	width:23px;
	height:23px;
	background:url("assets/static/layout/images/seeing.svg") no-repeat;
	background-size:20px;
	vertical-align:middle;
	position: absolute;
    left: -21px;
    top: 1px;
}
</style>
</head>
<body>
	<div class="wrapper">
		<!-- top bar -->
		<div class="topbar clearfix" style="left: 60px;">

			<span class="topbar-title"></span> <a class="ng-tns-c0-0" href="#" id="options-menu-button"> <span class="fa fa-ellipsis-h"></span>
			</a>
			<div class="animated setting" id="topbar-icons">
				<a class="customization" href="#customization" style="display: none;"> <span class="topbar-icon fa fa-paint-brush"></span>
				</a>
				<div><div>数据日期：<span id="dataDate"></span></div><div>当前机构：<span id="nodeName">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div></div>
				<div class="profile">
					<img class="photo" href="#myspace" src="assets/static/layout/images/avatar_1.png">
					<div class="info">
						<span id="username" class="username">用户名</span> <span id="usercode" class="mail">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
					</div>
				</div>
				<div class="line"></div>
				<a class="user"> <span class="topbar-icon fa fa-user-o"></span> <span class="topbar-icon fa fa-angle-down" style="font-size: 16px;"></span>
					<!---->
				</a>
			</div>
		</div>
		<!-- left side bar -->
		<div class="sidebar" style="width: 60px;">
			<div class="nano">
				<div class="nano-content sidebar-scroll-content">
					<div class="logo">
						<img class="ng-tns-c0-0" height="60" src="assets/static/layout/images/toplogo.png" width="160">
					</div>
					<app-menu class="ng-tns-c0-0">
					<!--<div class="menu">
					 Menu
				 </div>-->
				 <div class="menu">
            <ul app-submenu="" root="true" class="ng-tns-c2-23">
				        <ul class="ng-tns-c2-23" id="menu_list">
		                <!--<li class="tns-list">
		                   <a routerlinkactive="active-menuitem-routerlink" class="ng-tns-c2-23" href="#/graph">
		                        <i class="fa fa-fw fa-connectdevelop" style="font-size:18px !important;"></i>
		                        <span class="txt_relation" style="display: none;">关联关系</span>
		                    </a>
		                </li>-->
				        </ul>
				    </ul>
        </div>
					</app-menu>
				</div>
			</div>
		</div>
		<div class="main" style="margin-left: 50px;height:100%;box-sizing: border-box;">
		<div style="height:100%;padding-top: 5px;">
		<iframe width="100%" height="100%" id="mainContainer" name="mainContainer" scrolling="auto" style="border:none;padding: 0; margin:0; overflow: hidden;" src=""></iframe>
		</div>

		</div>
	</div>
	<script type="text/javascript">

        document.getElementById("dataDate").innerHTML = getCookie("currentDataDate");
        var nodeName = getCookie("currentNodeName");
        if (!nodeName) {
        	nodeName = getCookie("currentNodeCode");
        }else{
        	nodeName = decodeURI(nodeName);
        }
        document.getElementById("nodeName").innerHTML = nodeName;
        document.getElementById("username").innerHTML = decodeURI(getCookie("currentUserName"));
        document.getElementById("usercode").innerHTML = getCookie("currentUserCode");
        
        var curmenu = getCookie("currentMenu");

        $.getJSON(restRoot + "/iisp-auth/tree/menus/current-user", null, function(data) {
	        var strHtmlm = genMenu(data);
	        $("#menu_list").append(strHtmlm);
	        $(".menuitem").click(function() {
	        	if (this.target == 'mainContainer'){
	        		setCookie("currentMenu", this.href);
	        	}
	        });
	        addIcon();//添加图标
        });
        function addIcon() {
	        var firstLevelList = $("#menu_list .tns-list");
	        for (var i = 0; i < firstLevelList.length; i++) {
		        if ($(firstLevelList[i]).children("ul").length) {
			        $('<i style="padding-left:3px;cursor:pointer;" class="toggleicon fa fa-chevron-down" aria-hidden="true"></i>')
			                .insertAfter($(firstLevelList[i]).children(".txt_relation"));
		        }
	        }
	        $("#menu_list>.tns-list").prepend("<span class='first-level-icon'></span>");
	        //$("#menu_list>.tns-list:nth-child(1)>span:first-child").append('');//关系探查
        }
        //$(".tns-list:first").on("click", function(){
        //$(this).
        //});
        function genMenu(items) {
	        var strHtml = "";
	        for (var i = 0; i < items.length; i++) {
		        var info = items[i];
		        strHtml += '<li class="tns-list">';
		        if (info.url) {
		        	var url = info["url"];
		        	if (url.indexOf("/") == 0) {
		        		url = contextPath + url;
		        	}
		        	if (!curmenu){
		        		curmenu = url;
		        	}
			        strHtml += '<a class="ng-tns-c2-23 menuitem" href="'+url+'" target="'+info.targetWindow+'"><span class="txt_relation">'
			                + info["name"] + '</span></a>';
		        } else {
			        strHtml += '<span class="txt_relation">' + info["name"] + '</span>';
		        }
		        if (info.children && info.children.length > 0) {
			        strHtml += '<ul>';
			        strHtml += genMenu(info.children);
			        strHtml += '</ul>';
		        }
		        strHtml += '<li>';
	        }
	        if (curmenu) {
		        document.getElementById("mainContainer").src = curmenu;
	        }
	        return strHtml;
        }
        $('.sidebar').on({
            'mouseenter' : function() {
	            $(this).stop().animate({
		            "width" : 210
	            }, 150);
	            $(".txt_relation").show().css({
		            "display" : "inline-block"
	            });
	            $(".fa-chevron-down").show();
	            $(".toggleicon").show();
	            //$(".topbar").stop().animate({"left": 160},150);
	            //$(".main").stop().animate({"marginLeft": 160},80);
            },
            'mouseleave' : function() {
	            $(".txt_relation").hide();
	            $(".fa-chevron-up").addClass("fa-chevron-down").removeClass("fa-chevron-up").hide();
	            $(".fa-chevron-down").hide();
	            $(this).stop().animate({
		            "width" : 60
	            }, 150);
	            $(".toggleicon").parent().children("ul").hide();
	            //$(".topbar").stop().animate({"left": 60},80);
	            //$(".main").stop().animate({"marginLeft": 60},80);
            }
        });
        var NPL_PARAM = {};
        NPL_PARAM.selectedLeftMenuEle = null;
        $('.sidebar')
                .on(
                        "click",
                        function(e) {
	                        if ($(e.target).hasClass("toggleicon") || $(e.target).next().hasClass("toggleicon")) {
		                        $(e.target).parent().children("ul").slideToggle();
		                        if ($(e.target).hasClass("toggleicon")) {
			                        $(e.target).toggleClass("fa-chevron-down fa-chevron-up");
		                        }
	                        }
	                        if ($(e.target).get(0).tagName == "SPAN") {
		                        if ($(e.target).parent("a").closest("ul").closest("li").closest("ul#menu_list").length
		                                || $(e.target).parent("a").closest("ul").closest("li").closest("ul").closest("li").closest(
		                                        "ul#menu_list").length) {
			                        if (NPL_PARAM.selectedLeftMenuEle) {
				                        NPL_PARAM.selectedLeftMenuEle.remove();
			                        }
			                        NPL_PARAM.selectedLeftMenuEle = $("<span class='seeing-img'></span>").insertBefore($(e.target));
		                        }
	                        }
                        });
	</script>
</body>
